<template>
  <div :class="className" :style="chartStyle" />
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, inject } from 'vue';
import * as echarts from 'echarts';
import 'echarts/theme/macarons'; // echarts theme
import resize from './mixins/resize';

const animationDuration = 3000;
const $echarts = inject('$echarts');

const className = ref('chart');
const chartStyle = {
  height: '300px',
  width: '100%'
};
let chart = null;

onMounted(() => {
  initChart();
});

onBeforeUnmount(() => {
  if (!chart) return;
  chart.dispose();
  chart = null;
});

function initChart() {
  chart = $echarts.init(document.querySelector('.chart'), 'macarons');

  chart.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    radar: {
      radius: '66%',
      center: ['20%', '42%'],
      splitNumber: 8,
      splitArea: {
        areaStyle: {
          color: 'rgba(127,95,132,.3)',
          opacity: 1,
          shadowBlur: 45,
          shadowColor: 'rgba(0,0,0,.5)',
          shadowOffsetX: 0,
          shadowOffsetY: 15
        }
      },
      indicator: [
        { name: '待入库', max: 10000 },
        { name: '已测量', max: 20000 },
        { name: '已装柜', max: 20000 },
        { name: '已发运', max: 20000 },

      ]
    },
    legend: {
      left: '10%',
      bottom: '10%',
      data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
    },
    series: [{
      type: 'radar',
      symbolSize: 0,
      areaStyle: {
        normal: {
          shadowBlur: 13,
          shadowColor: 'rgba(0,0,0,.2)',
          shadowOffsetX: 0,
          shadowOffsetY: 10,
          opacity: 1
        }
      },
      data: [
        {
          value: [1000, 1000, 1000, 1000, 5000, 4000],
          name: 'Allocated Budget'
        },
        {
          value: [400, 900, 1500, 1500, 1300, 1100],
          name: 'Expected Spending'
        },
        {
          value: [550, 1100, 1200, 1000, 1200, 1200],
          name: 'Actual Spending'
        }
      ],
      animationDuration: animationDuration
    }]
  });
}
</script>
